<template>
  <form-dialop
    :title="title"
    :visible="visible"
    width="30%"
    @handleClose="handleClose"
  >
    <template #content>
      <el-form ref="form" :model="formData" :rules="formRule" label-width="160px" v-loading="loading">
        <el-form-item :label="$t('policy.USBDeviceType')" prop="usb_family" name="usb_family">
          <el-select v-model="formData.usb_family">
						<el-option
							v-for="item in categoryList"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
        </el-form-item>
        <el-form-item v-if="formData.usb_family === '*'" :label="$t('policy.Vendor')" prop="vendor" name="vendor">
          <el-input v-model="formData.vendor" @keyup.enter.native="submit"></el-input>
        </el-form-item>
        <el-form-item v-if="formData.usb_family === '*'" :label="$t('policy.product')" prop="product" name="product">
          <el-input v-model="formData.product" @keyup.enter.native="submit"></el-input>
        </el-form-item>
        <el-form-item :label="$t('common.description')" prop="description" name="resource-pool-form-description">
          <el-input v-model="formData.description" type="textarea" maxlength="200" show-word-limit @keyup.enter.native="submit"></el-input>
        </el-form-item>
				<el-form-item :label="$t('policy.AllowPassThrough')" prop="enabled" name="enabled">
          <el-checkbox v-model="formData.enabled"></el-checkbox>
        </el-form-item>
      </el-form>
			<div style="padding-left:45px" v-if="formData.usb_family === '*'">
				<p style="font-size:12px;line-height:2">{{$t('policy.message.vendorHelp')}}</p>
				<p style="font-size:12px;line-height:2">{{$t('policy.message.productHelp')}}</p>	
			</div>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialop from '../../../components/Dialog/formDialog.vue';
export default Vue.extend({
  components: {
    FormDialop
  },
  data() {
    return {
      visible: false,
      loading: false,
			USBRuleId: NaN,
			isPatch: false,
      formData: {
        usb_class: "",
				usb_family: "",
        vendor: "",
        product: "",
				enabled: true,
        description: ""
      },
			title:'',
			ruleData:'',
			categoryList: [
				{ value: "*", label: (this as any).$t("policy.any") },
				{ value: "audio", label: (this as any).$t("policy.usbFamily.audio") },
				{ value: "audio-in", label: (this as any).$t("policy.usbFamily.audio-in") },
				{ value: "audio-out", label: (this as any).$t("policy.usbFamily.audio-out") },
				{ value: "bluetooth", label: (this as any).$t("policy.usbFamily.bluetooth") },
				{ value: "comm", label: (this as any).$t("policy.usbFamily.comm") },
				{ value: "hid", label: (this as any).$t("policy.usbFamily.hid") },
				{ value: "hid-bootable", label: (this as any).$t("policy.usbFamily.hid-bootable") },
				{ value: "imaging", label: (this as any).$t("policy.usbFamily.imaging") },
				{ value: "keyboard", label: (this as any).$t("policy.usbFamily.keyboard") },
				{ value: "mouse", label: (this as any).$t("policy.usbFamily.mouse") },
				{ value: "pda", label: (this as any).$t("policy.usbFamily.pda") },
				{ value: "physical", label: (this as any).$t("policy.usbFamily.physical") },
				{ value: "printer", label: (this as any).$t("policy.usbFamily.printer") },
				{ value: "security", label: (this as any).$t("policy.usbFamily.security") },
				{ value: "smart-card", label: (this as any).$t("policy.usbFamily.smart-card") },
				{ value: "storage", label: (this as any).$t("policy.usbFamily.storage") },
				{ value: "vendor", label: (this as any).$t("policy.usbFamily.vendor") },
				{ value: "video", label: (this as any).$t("policy.usbFamily.video") },
				{ value: "wireless", label: (this as any).$t("policy.usbFamily.wireless") },
				{ value: "wusb", label: (this as any).$t("policy.usbFamily.wusb") },
				{ value: "other", label: (this as any).$t("policy.usbFamily.other") },
				{ value: "unknown", label: (this as any).$t("policy.usbFamily.unknown") }
			],
      formRule: {
				vendor: [
					{ required: true, message: (this as any).$t('policy.message.PleaseEnterTheManufacturer').toString(), trigger: 'blur' },
          { max: 50, message: (this as any).$t('policy.message.ruleLength').toString(), trigger: 'blur' },
          { validator: (rule: any, value: any, callback: any) => {
						let rules = /^[0-9a-fA-F]{4}$|^[\\*]$/;
            if (rules.test(value)) {
              return callback();
            } else {
							 return callback(new Error((this as any).$t('policy.message.ruleVentor')))
            }
          }, trigger: 'blur' }
				],
				product: [
					{ required: true, message: (this as any).$t('policy.message.PleaseEnterTheProductCode'), trigger: 'blur' },
          { max: 50, message: (this as any).$t('policy.message.ruleLength').toString(), trigger: 'blur' },
          { validator: (rule: any, value: any, callback: any) => {
						let rules = /^[0-9a-fA-F]{4}$|^[\\*]$/;
            if (rules.test(value)) {
              return callback();
            } else {
							 return callback(new Error((this as any).$t('policy.message.ruleProduct')))
            }
          }, trigger: 'blur' }
				],
        description: [
          { max: 200, message: (this as any).$t('policy.message.descriptionLength').toString(), trigger: 'blur' }
        ]
      }
    }
  },
  created() {
  },
	watch: {
    "formData.usb_family"(newValue, oldValue) {
			if (newValue !== '*') {
				this.formData.product = '*';
				this.formData.vendor = '*';
			}
    },
  },
  methods: {
    init(
			id: any,
			data: any) {
				if(data.usb_family_name){
					this.title = this.$t('policy.editUSBRule') as any;
					this.formData = {
						usb_class: data.usb_class_name,
						vendor: data.vendor,
						product: data.product,
						enabled: data.enabled,
						usb_family: data.usb_family,
						description: data.description
					};
					this.isPatch = true;
					this.ruleData = data;
				}else {
					this.title = this.$t('policy.NewUSBRule') as any
					this.formData = {
						usb_class: "*",
						vendor: "*",
						product: "*",
						enabled: true,
						usb_family: "*",
						description: ""
					};
				}
			
				this.USBRuleId = id;
				this.$nextTick(() => {
					if (this.$refs['form']) {
						(this.$refs['form'] as any).clearValidate();
					}
				})
				this.visible = true;
    },
    submit() {
			if (this.formData.vendor !== '*' && this.formData.product === '*') {
				this.formData.product = '';
			}
			if (this.formData.product !== '*' && this.formData.vendor === '*') {
				this.formData.vendor = '';
			}

      if (this.formData.usb_family !== '*') {
        this.formData.product = '*';
        this.formData.vendor = '*';
      }
      (this.$refs.form as any).validate((valid: any) => {
        if (valid) {
					this.loading = true;
					if(this.isPatch){
						if((this as any).ruleData.usb_class === '任意' || (this as any).ruleData.usb_class === '*'){
							delete (this as any).formData.usb_class;
							// delete (this as any).formData.vendor;
							// delete (this as any).formData.product;
						}
						(this as any).$pandaApi.apiUpdateUsbRule(this.USBRuleId, (this.ruleData as any).id, this.formData).then((res: any)=>{
							this.loading = false;
							this.visible = false;
							this.$message({
								message: this.$t('policy.message.editUSBRuleSuccess').toString(),
								type: 'success'
							});
							this.$emit('success');
							this.isPatch = false;
						}).catch(() => {
							this.$message({
								message: this.$t('policy.message.editUSBRuleFail').toString(),
								type: 'warning'
							});
							this.loading = false;
							this.isPatch = false;
						})
					}else {
						(this as any).$pandaApi.apiAddUsbRule(this.USBRuleId, this.formData).then((res: any) => {
							this.loading = false;
							this.visible = false;
							if (res.error === true && res.message === "409-冲突") {
								this.$message({
									message: this.$t('policy.message.USBRuleOccupied').toString(),
									type: 'warning'
								});
								return;
							}
							this.$emit('success');
							this.$message({
								message: this.$t('policy.message.createUSBRuleSuc').toString(),
								type: 'success'
							});
						}).catch(() => {
							this.$message({
								message: this.$t('policy.message.createUSBRuleFail').toString(),
								type: 'warning'
							});
							this.loading = false;
						})
					}
        }
      });
    },
    handleClose() {
			this.visible = false;
      this.loading = false;
      // this.formData = {
      //   usb_class: "*",
			// 	vendor: "*",
			// 	product: "*",
			// 	enabled: true,
			// 	usb_family: "*",
			// 	description: ""
      // };
    }
  }
})
</script>
